<template>
  <!-- 收藏
    类名  对象  根据数据里的状态值
    点击事件  高亮  根据数据里的状态值
 -->

  <div class="collect-article">
    <van-icon
      @click="collectbtn"
      :class="{ red: article.is_collected }"
      name="star"
    />
  </div>
</template>

<script>
import { collectionsApi, delcollectionsApi } from "@/api";
export default {
  props: ["article"],
  methods: {
    //点击收藏
    collectbtn() {
      this.article.is_collected = !this.article.is_collected;
      //如果 this.article.is_collected = false 就表示还没有关注
      if (this.article.is_collected) {
        this.collections(); // 收藏文章请求
      } else {
        this.delcollections();
      }
    },
    // 收藏文章请求
    async collections() {
      const res = await collectionsApi(this.article.art_id);
      //   console.log(res, 66666);
    },
    //取消收藏的请求
    async delcollections() {
      const res = await delcollectionsApi(this.article.art_id);
      //   console.log(res, 121212);
    }
  }
};
</script>
<style scoped lang="less">
.collect-article {
  .red {
    color: orange;
  }
}
</style>
